<template>
	<view class="container">
		<view class="top-view">
			<date-select-view @change="dateChange"></date-select-view>
		</view>

		<u-swipe-action v-for="(item, index) in list"
			:show="item.show" 
			:index="index"
			:key="item.id" 
			@click="click" @open="open"
			bg-color="#FAFAFA"
			:options="options">
				<view class="item" @click="itemClick(item)">
					<view class="top">
						<view>{{item.childName}}({{item.situation}})</view>
						<view :class="item.processed ? 'state-read':'state-unread'">{{item.processed === true ? '已读' : '未读'}}</view>
					</view>
					<view class="line"></view>
					<view class="">
						<view v-for="(medicines, medicinesIndex) in item.medicines">
							<view class="info">
								{{ medicines.name }} | {{ medicines.way }} | {{ medicines.dailyTimes }}次 | 每次{{ medicines.quotaPerTime }}{{ medicines.unit }}
							</view>
							<view class="info">
								{{ medicines.daytimeList }}
							</view>
							<view class="info">
								{{ medicines.remark }}
							</view>
							<multi-media-view :resourceUrls="medicines.image | resourceUrlFilter" class="multi-media-view"></multi-media-view>
						</view>
					</view>
				</view>
		</u-swipe-action>
		<fab v-if="appType === 'app-p' || appType === 'mp-p'" @fabClick="fabClick"/>
		<u-loadmore v-if="!emptyShow" :status="status" />
		<u-empty class="noContent" v-if="emptyShow" text="暂时没有托药记录哦～"  mode="list"></u-empty>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import { formatDateByTimestamp } from '@/utils/utils.js'
	import { getHandoverByDaily, getHandoverByParent, deleteHandover, addRecordHandover } from '@/api/record.js'
	import pageMixin from '@/mixins/page.js'
	import DateSelectView from '@/components/date-select-view.vue'
	import Fab from '@/components/fab.vue'
	import MultiMediaView from '@/components/multi-media-view.vue'
	export default {
		mixins: [pageMixin],
		components: {
			DateSelectView,
			Fab,
			MultiMediaView
		},
		filters: {
			resourceUrlFilter (value) {
				if (!value) {
					return []
				}
				return value.split('|');
			}
		},
		computed: {
			...mapState({
				appType: state => state.app.appType,
				parentInfo: state => state.user.parentInfo,
			}),
		},
		data() {
			return {
				daily: formatDateByTimestamp(Date.now(), 'yyyy/mm/dd'),
				// daily: '2022/07/21',
				options: [
					{
						text: '删除',
						style: {
							backgroundColor: '#DA473A'
						}
					}
				],
			}
		},
		onShow() {
			this.refresh()
		},
		methods: {
			refresh() {
				this.page = -1;
				this.getList(this.page);
			},
			getList(page) {
				console.log(page);
				const { daily } = this
				this.emptyShow = false;
				if (this.appType === 'app-p' || this.appType === 'mp-p') {
					const childrenId = this.parentInfo.defaultBabyId;
					getHandoverByParent({childId: childrenId}).then(res => {
						this.setData(res);
						uni.stopPullDownRefresh();
					})
				} else {
					getHandoverByDaily({daily}).then(res => {
						console.log(res);
						this.setData(res);
						uni.stopPullDownRefresh();
					})
				}
			},
			
			dateChange(res) {
				console.log(res);
				this.daily = formatDateByTimestamp(res.timestamp, 'yyyy/mm/dd');
				this.getList(this.page);
			},
			
			fabClick() {
				let params = {}
				if (this.appType === 'app-p' || this.appType === 'mp-p') {
					params = {
						...this.parentInfo.defaultBaby,
					}
					this.$u.route({
						url: '/pages_sub/record/handover-add-page',
						params: params
					})
				}
			},
			
			delete(item) {
				uni.showLoading({})
				deleteHandover(item.childId, item.id).then(res => {
					uni.hideLoading()
					this.refresh()
				})
			},
			click(index, optionIndex) {
				const item = this.list[index];
				const that = this
				if (optionIndex === 0) {
					uni.showModal({
					    title: '提示',
					    content: '确认删除该条记录吗？',
					    success: function (res) {
					        if (res.confirm) {
					            that.delete(item);
					        } else {
								setTimeout(function() {
									tab.list.map((val, idx) => {
										tab.list[idx].show = false;
									})
								}, 500);
							}
					    }
					});
					
				}
			},
			itemClick(item) {
				if (this.appType === 'app-tch' || this.appType === 'mp-tch') {
					uni.showLoading({})
					addRecordHandover({processed: true, id: item.id}).then(res => {
						console.log(res)
						item.processed = true
						this.list.splice(index, 1, item);
					}).finally(o => {
						uni.hideLoading()
						const params = {
							id: item.childId,
							name: item.childName,
							recordId: item.id
						}
						this.$u.route({
							url: '/pages_sub/record/handover-treatment-page',
							params
						})
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $app-page-bg-color;
	}
</style>
<style lang="scss" scoped>
	.container{
		display: flex;
		flex-direction: column;
		background-color: $app-page-bg-color;
		
		.top-view{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin-top: 30rpx;
			margin-left: 30rpx;
		}
	}
	
	.item{
		display: flex;
		flex-direction: column;
		// padding: 30rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-top: 20rpx;
		padding-bottom: 10rpx;
		background-color: #fff;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		border: 1rpx solid $app-divider-color;
		.top{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}
		
		.line{
			background-color: $app-divider-color;
			height: 2rpx;
			width: 100%;
			margin-top: 10rpx;
			margin-bottom: 10rpx;
		}
		
		.state-read{
			color: #28A871;
		}
		
		.state-unread{
			color: #f3a235;
		}
	}
	
	.info{
		margin-bottom: 10rpx;
	}
</style>
